<script setup lang="ts">
import { useMemberStore, useOrder } from '@/stores'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { collectCountAPI } from '@/services/favorite'
import { countAPI } from '@/services/coupon'
import { signMemberAPI } from '@/services/member'
import { ref } from 'vue'
const { getorderStatusTabs } = useOrder()
const { safeAreaInsets } = uni.getSystemInfoSync()
// const collectCount = ref(0)

const { getUserInfo, setSign } = useMemberStore()

onShow(async () => {
  // const collectRes = await collectCountAPI()
  // collectCount.value = collectRes.data
})

const onScrolltolower = () => {
  console.log('滚动触底')
}
const signMemberHandler = async () => {
  if (getUserInfo().member.signStatus > 0) {
    uni.showToast({
      title: '已签到',
      icon: 'none',
    })
    return
  }
  await signMemberAPI(getUserInfo()?.id)
  setSign(10)
  uni.showToast({
    title: '签到成功',
    icon: 'none',
  })
}
</script>

<template>
  <scroll-view class="my-container" scroll-y @scrolltolower="onScrolltolower">
    <!-- 个人资料 -->
    <view class="profile" :style="{ paddingTop: safeAreaInsets!.top + 'px' }">
      <!-- 情况1：已登录 -->
      <view class="overview" v-if="getUserInfo()?.id">
        <navigator class="avatar-nav" url="/pagesMember/profile/profile" hover-class="none">
          <image class="avatar" mode="aspectFill" :src="getUserInfo().avatarUrl"></image>
          <view class="meta">
            <view class="nickname"> {{ getUserInfo().nickName }} </view>
            <view class="extra">
              <text class="tips">更新头像昵称</text>
            </view>
          </view>
        </navigator>
        <view class="left-sign">
          <navigator class="settings" url="/pagesMember/settings/settings" hover-class="none">
            <text class="iconfont icon-icon-test1"></text>
          </navigator>

          <view class="sign-btn" @click="signMemberHandler">{{
            getUserInfo().member.signStatus === 0 ? '签到' : '已签到'
          }}</view>
        </view>
      </view>
      <!-- 情况2：未登录 -->
      <view class="overview" v-else>
        <navigator class="avatar-nav" url="/pages/login/login" hover-class="none">
          <image
            class="avatar gray"
            mode="aspectFill"
            src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-06/db628d42-88a7-46e7-abb8-659448c33081.png"
          ></image>
          <view class="meta">
            <view class="nickname"> 未登录 </view>
            <view class="extra">
              <text class="tips">点击登录账号</text>
            </view>
          </view>
        </navigator>

        <view class="left-sign">
          <navigator class="settings" url="/pagesMember/settings/settings" hover-class="none">
            <text class="iconfont icon-icon-test1"></text>
          </navigator>
          <view class="sign-btn" @click="signMemberHandler">{{
            getUserInfo().member.signStatus === 0 ? '签到' : '已签到'
          }}</view>
        </view>
      </view>
    </view>
    <view class="member-card-container">
      <view class="member-card">
        <view class="title">
          <text class="name">{{ getUserInfo()?.member?.levelName }}</text>
          <text class="card-id">NO.{{ getUserInfo()?.member?.id }}</text>
        </view>
        <text class="con">会员特权 · 生日双倍积分</text>
        <view class="credits-box">
          <view class="credits">积分 {{ getUserInfo()?.member?.points }}</view>
        </view>
      </view>
    </view>
    <view class="content-main">
      <!-- 我的订单 -->
      <view class="orders">
        <view class="header">
          <text class="title">我的订单</text>
          <navigator class="nav" :url="`/pages/order/order?type=-1`" hover-class="none">
            全部订单
          </navigator>
        </view>
        <view class="section">
          <!-- 订单 -->
          <navigator
            v-for="item in getorderStatusTabs().filter((item) => item.icon)"
            :key="item.icon"
            :class="item.icon"
            :url="`/pages/order/order?type=${item.orderState}`"
            class="nav-item"
            hover-class="none"
          >
            <text :class="'iconfont ' + item.icon"></text>
            <text class="text">{{ item.text }}</text>
          </navigator>
        </view>
      </view>

      <view class="card-list">
        <navigator class="coupon" url="/pagesMember/coupon/coupon" hover-class="none">
          <text class="name">领券中心</text>
          <text class="val">{{ getUserInfo()?.member?.couponCount }}张可用</text>
        </navigator>
        <navigator class="favorites" url="/pagesMember/favorite/favorite" hover-class="none">
          <text class="name">好物收藏</text>
          <text class="val">{{ getUserInfo()?.member?.collectCount }}个商品</text>
        </navigator>
      </view>
    </view>
  </scroll-view>
</template>

<style lang="scss">
@import '@/styles/variables.scss';

$card-height: 256rpx;
page {
  height: 100%;
  overflow: hidden;
  background-color: $background-color;
}

.my-container {
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/center_bg.png);
  background-size: 100% auto;
  position: relative;
  // &::after {
  //   content: '';
  //   position: absolute;
  //   z-index: -1;
  //   left: 0;
  //   top: 0;
  //   width: 100%;
  //   height: 100%;
  //   background-color: #f8f9fa;
  // }
  /* 用户信息 */
  .profile {
    padding-top: 20rpx;
    padding-bottom: 90rpx;
    position: relative;

    .overview {
      display: flex;
      height: 120rpx;
      padding: 0 36rpx;
      color: #fff;
      justify-content: space-between;
      .avatar-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        .avatar {
          border: 2px solid #fff;
          width: 128rpx;
          height: 128rpx;
          border-radius: 50%;
          background-color: #eee;
          vertical-align: top;
        }
      }

      .left-sign {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .sign-btn {
          background-color: rgb(255, 102, 0);
          color: #fff;
          line-height: 40rpx;
          height: 40rpx;
          border-radius: 20rpx;
          padding: 0 20rpx;
          font-size: $font-mini-size;
        }
      }
    }

    .gray {
      filter: grayscale(100%);
    }

    .meta {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      // line-height: 30rpx;
      // padding: 16rpx 0;
      margin-left: 32rpx;
    }

    .nickname {
      max-width: 350rpx;
      margin-bottom: 16rpx;
      font-size: $font-large-size;
      color: #fff;
      font-weight: $font-bold-weight;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .extra {
      display: flex;
      font-size: $font-size;
      color: #e8f5e9;
      font-weight: $font-medium-weight;
      .tips {
        // font-size: 22rpx;
      }

      .update {
        // padding: 3rpx 10rpx 1rpx;
        // color: rgba(255, 255, 255, 0.8);
        // border: 1rpx solid rgba(255, 255, 255, 0.8);
        // margin-right: 10rpx;
        // border-radius: 30rpx;
      }
    }

    .settings {
      margin-left: auto;
      width: auto;
      height: auto;
      display: flex;
      align-items: center;
      // position: absolute;
      // bottom: 0;
      // right: 40rpx;
      // font-size: 30rpx;
      // color: #fff;
    }
  }

  .member-card-container {
    height: $card-height - 40rpx;
    position: relative;
    width: 100%;

    .member-card {
      position: absolute;
      left: 40rpx;
      right: 40rpx;
      bottom: 0;
      box-sizing: border-box;
      height: $card-height;

      background: linear-gradient(to right bottom, #ffd700, #ffa500);
      border-radius: $border-lager-radius;
      box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.2);
      color: white;
      padding: $medium-padding;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .name {
          font-size: $font-medium-size;
          font-weight: $font-bold-weight;
          color: #fff;
          display: flex;
          align-items: center;
          &::before {
            content: '\eb71';
            font-family: 'iconfont' !important;
            font-size: 66rpx;
            margin-right: 8rpx;
            color: #fff;
          }
        }
        .card-id {
          font-size: $font-size;
          font-weight: $font-weight;
          color: #fff;
        }
      }

      .con {
        font-size: $font-size;
        color: #fff;
        font-weight: $font-weight;
      }
      .credits-box {
        display: flex;
        .credits {
          font-size: $font-small-size;
          color: #fff;
          font-weight: $font-regular-weight;
          height: 50rpx;
          line-height: 50rpx;
          padding: 0 30rpx;
          border-radius: 25rpx;
          position: relative;
          overflow: hidden;
          &::before {
            position: absolute;
            left: 0;
            top: 0;
            content: '';
            display: block;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.4);
          }
        }
      }
    }
  }
  .content-main {
    // background-color: #f8f9fa;
    padding-bottom: 100rpx;
  }
}

.orders {
  border-radius: $border-lager-radius;
  padding: $lager-padding;
  background-color: #fff;
  margin: 40rpx;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;
    .title {
      font-size: $font-medium-size;
      color: #000;
      font-weight: $font-bold-weight;
    }

    .nav {
      display: flex;
      align-items: center;
      font-size: $font-size;
      color: $color;

      &::after {
        content: '\e632';
        font-family: 'iconfont' !important;
        font-size: 40rpx;
        margin-left: 4rpx;
        color: $color;
      }
    }
  }

  .section {
    display: flex;
    justify-content: space-between;

    .nav-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      &::before {
        content: '';
      }
      .iconfont {
        font-size: 56rpx;
        color: $color;
      }
      .text {
        margin-top: 10rpx;
        font-size: $font-size;
        font-weight: $font-weight;
        color: #000;
      }
    }
  }
}

.card-list {
  margin-bottom: 80rpx;
  .coupon,
  .favorites {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 0 40rpx 40rpx;

    background-color: #fff;
    border-radius: $border-lager-radius;
    padding: 32rpx;
  }

  .coupon {
    .name {
      display: flex;
      align-items: center;
      font-size: $font-medium-size;
      color: #1f2937;
      font-weight: $font-medium-weight;
      &::before {
        content: '\e8c0';
        font-family: 'iconfont' !important;
        font-size: 56rpx;
        margin-right: 20rpx;
        color: $color;
      }
    }
    .val {
      font-size: $font-size;
      color: #9ca3af;
      font-weight: $font-weight;
      display: flex;
      align-items: center;
      &::after {
        content: '\e632';
        font-family: 'iconfont' !important;
        font-size: 40rpx;
        margin-left: 10rpx;
        color: #9ca3af;
      }
    }
  }
  .favorites {
    .name {
      display: flex;
      align-items: center;
      font-size: $font-medium-size;
      color: #1f2937;
      font-weight: $font-medium-weight;
      &::before {
        content: '\e8ab';
        font-family: 'iconfont' !important;
        font-size: 56rpx;
        margin-right: 20rpx;
        color: $color;
      }
    }
    .val {
      display: flex;
      align-items: center;
      font-size: $font-size;
      color: #9ca3af;
      font-weight: $font-weight;
      &::after {
        content: '\e632';
        font-family: 'iconfont' !important;
        font-size: 40rpx;
        margin-left: 10rpx;
        color: #9ca3af;
      }
    }
  }
}

/* 猜你喜欢 */
.guess {
  background-color: #f7f7f8;
  margin-top: 20rpx;
}
</style>
